<template>
  <div class="wrapper">
    <div class="aaa">
      <el-form :rules="rules" :model="user" ref="userForm">
        <div class="bbb"><b>登录</b></div>
        <label for="">账号</label>
        <el-form-item prop="account">
          <el-input
            size="medium"
            prefix-icon="el-icon-user"
            v-model="user.account"
          ></el-input>
        </el-form-item>
        <label for="">密码</label>
        <el-form-item prop="password">
          <el-input
            size="medium"
            prefix-icon="el-icon-lock"
            show-password
            v-model="user.password"
          ></el-input>
        </el-form-item>

        <div class="ccc">
          <el-button plain @click="login">登录</el-button>
          <el-button type="primary" plain @click="forgetpassword"
            >忘记密码？</el-button
          >
        </div>
      </el-form>
    </div>
    <div class="right">
      <div class="bbb"><b>注册</b></div>
      <p>在我们这里创建一个帐户，您将能够：</p>
      <ul>
        <li>更快的结账</li>
        <li>保存更多的收货地址</li>
        <li>访问你的浏览记录</li>
        <li>跟踪新的订单</li>
        <li>在你的购物车中保存商品</li>
      </ul>
      <router-link to="/Register">
        <el-button type="info" style="margin-top: 18px" @click="register"
          >注册账号</el-button
        >
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";

export default {
  name: "LoginV",
  data() {
    return {
      user: {},
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  created() {},
  methods: {
    login() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          axios
            .request({
              url: "/api/user/login",
              method: "post",
              data: {
                account: this.user.account,
                password: this.user.password,
              },
            })
            .then((res) => {
              if (!res.data) {
                this.$message.error("用户名或密码错误,你在搞什么斐济?");
              } else {
                console.log(res.data);
                store.commit('getToken',res.data.token)
                store.commit('getuser',res.data.user)
                store.commit("getDL", true);
                this.$router.push("/");
                this.$message.success("登录成功")
                this.$router.go(0);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    forgetpassword() {},
    register() {},
  },
};
</script>


<style scoped>
@import "@/static/Login.css";
</style>
